<template>
	<view>
		<swiper :indicator-dots="dots" :autoplay="autoplay" :interval="interval" :duration="duration" class="banner"
			:indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" @change="bindchange"
			@transition="bindtransition" @animationfinish="bindanimationfinish"
			:style="'height:' + (diyHeight ? diyHeight : bannerHeight) + 'rpx;'">
			<block v-for="(item, index) in swiper" :key="index">
				<swiper-item>
					<view v-if="isNum" class="poa_num">
						<view class="num_box">{{ index + 1 }} / {{ swiper.length }}</view>
					</view>
					<view :data-url="item.adurl" @tap="golink" :data-id="index" :data-imgurl="item.adimg"
						v-if="!item.admemo">
						<image :src="$com.imageOSS(item.adimg)"
							:style="'height:' + (diyHeight ? diyHeight : bannerHeight) + 'rpx;'" mode="aspectFill" />
					</view>
					<view v-if="item.admemo" style="height: 100%; width: 100%">
						<video :src="$com.imageOSS(item.admemo)" :autoplay="index == 0 ? true : false" controls muted
							object-fit="cover"
							:style="'height: ' + (diyHeight ? diyHeight + 'rpx' : '100%') + '; width: 100%;'"
							:id="item.adid" :data-id="item.adid" :data-index="index" :show-mute-btn="true"
							@play="curBannerHeight==index?videoPlay($event):''"
							@pause="curBannerHeight==index?videoPause($event):''"
							@ended="curBannerHeight==index?videoEnded($event):''" class="bvideo"></video>
					</view>
				</swiper-item>
			</block>
			<view class="dis_border" v-if="isDiscount" :data-url="swiper[0].adurl" @tap="golink" :data-id="0"
				:data-imgurl="swiper[0].adimg">
				<image class="dis_border_img" :src="$com.imageOSS('xuqiu/m17301062200006367.png')" mode="widthFix" />
			</view>
		</swiper>
		<view class="discount" v-if="isDiscount && curBannerHeight == 0">
			<view class="zhe_box">
				<block v-if="discount > 0">
					<view style="padding-left: 60rpx">
						<text style="font-size: 54rpx; font-weight: 500; margin-right: 6rpx">{{ discount }}</text>
						<text>折优惠</text>
					</view>
				</block>
				<block v-else>
					<view class="logo_img">
						<image style="width: 256rpx; height: 48rpx" src="/static/img/zhe_logo.png" mode="widthFix" />
					</view>
				</block>
			</view>
			<view class="coupon_box">
				<block v-if="couponList.length > 0">
					<view class="cou_tt" style="padding-left: 40rpx">
						<view class="cou_tt_mj">满{{ couponList[0].minusprice }}减{{ couponList[0].price }}</view>
						<view class="coupon_tt_date">{{ couponList[0].begintime }} - {{ couponList[0].endtime }}</view>
					</view>
				</block>
				<block v-else>
					<view class="logo_img" style="padding-left: 170rpx">
						<image style="width: 240rpx; height: 48rpx" src="/static/img/zhe_logo.png" mode="widthFix" />
					</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
	import wxApi from '../../utils/wxApi';
	import api from '../../utils/api';
	export default {
		data() {
			return {
				imgheights: {},
				curBannerHeight: 0,
				autoplay: true
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			swiper: {
				type: Array,
				default: () => []
				// 轮播图数据
			},
			isShowImg: {
				type: Boolean,
				default: false
			},
			bannerHeight: {
				type: Number,
				default: 644
			},
			dots: {
				type: Boolean,
				default: false
				// 是否显示指示器
			},
			isNum: {
				type: Boolean,
				value: false
				// 是否显示指示数量
			},
			interval: {
				type: Number,
				default: 5000
				// 自动切换时间间隔
			},
			duration: {
				type: Number,
				default: 500
				// 滑动动画时长
			},
			indicatorColor: {
				type: String,
				default: '#fff'
				// 指示点颜色
			},
			indicatorActiveColor: {
				type: String,
				default: '#fa3e3e'
				// 当前选中的指示点颜色
			},
			diyHeight: {
				type: String
				// 自定义高度
			},
			isDiscount: {
				type: Boolean,
				value: false
			},
			discount: {
				type: String
				// 优惠折扣
			},
			couponList: {
				type: Array,
				value: []
			}
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			bindchange: function(e) {
				let swiperArr = this.swiper;
				let curnt = swiperArr[e.detail.current];
				//console.log(curnt);
				this.pauseAllVideos(curnt); //暂停全部
				this.curBannerHeight = e.detail.current
			},
			bindtransition() {
				this.$emit('updateDot', {
					detail: {
						dots: true
					}
				});
			},
			bindanimationfinish() {
				this.$emit('updateDot', {
					detail: {
						dots: false
					}
				});
			},
			pauseAllVideos: function(e) {
				let swiperArr = this.swiper;
				let farr = swiperArr.filter((f) => f.admemo != '');
				var count = 0;
				farr.forEach((item) => {
					const context = uni.createVideoContext(item.adid + '', this);
					if (item.adid == e.adid) {
						context.play();
						this.autoplay = false
					} else {
						context.pause();
						count++;
					}
				});
				if (count == farr.length) {
					this.autoplay = true
				}
			},
			videoPlay(e) {
				this.autoplay = false
			},
			videoPause(e) {
				this.autoplay = true
			},
			videoEnded(e) {
				let curIndex = e.currentTarget.dataset.index;
				// console.log('curIndex============', curIndex);
				// console.log('curBannerHeight============', this.curBannerHeight);
				if (curIndex == this.curBannerHeight) {
					this.autoplay = true
				}
			},
			golink(e) {
				// console.log('e=', e, this.isShowImg);
				if (this.isShowImg) {
					let urls = this.swiper.map((m) => {
						return api.imageCdn + m.adimg;
					});
					let url = api.imageCdn + e.currentTarget.dataset.imgurl;
					uni.previewImage({
						urls: urls,
						current: url,
						fail() {
							uni.showToast({
								title: '预览图片失败',
								icon: 'none'
							});
						}
					});
				} else {
					const data = e.currentTarget.dataset || e.target.dataset;
					//转为小写并去除左右空格
					var str = data.url.toLowerCase();
					if (str != '') {
						if (str.indexOf('https') === 0 || str.indexOf('http') === 0) {
							wxApi.navigateTo('/pages/web/web?id=' + str);
						} else if (str.indexOf('mm://') == 0) {
							var array = str.split('_');
							if (array[0].replace('mm://', '') == 'shop') {
								wxApi.navigateTo('/pages/companydetail/index', {
									id: array[1]
								});
							}
						} else if (str.indexOf('ym://') == 0) {
							var url = str.replace('ym://', '');
							wxApi.navigateTo(url);
						} else {
							wxApi.navigateTo('/pages/goods/goods?id=' + str);
						}
					}
				}
			},
			imageLoad: function(e) {
				//获取图片真实宽度
				var imgwidth = e.detail.width;
				var imgheight = e.detail.height;
				var //宽高比
					ratio = imgwidth / imgheight; //计算的高度值
				var viewHeight = 750 / ratio;
				var imgheight = viewHeight;
				var imgheights = this.imgheights;
				//把每一张图片的对应的高度记录到数组里
				imgheights[e.target.dataset.id] = imgheight;
				this.imgheights = imgheights
			}
		},
		created: function() {}
	};
</script>
<style>
	@import './my-swiper.css';
</style>
